<script lang="ts">
import axios from "axios";
import { onMounted, ref, toRefs, reactive } from "vue";
import { useRouter } from "vue-router";

export default {
  setup() {
    interface typeData {
      iid: string;
      img: string;
      title: string
      price: number
      cfav: number
    }
    const docs = ref<typeData[]>([]);

    onMounted(() => {
      axios
        .get(`https://apis.netstart.cn/mogujie/goods/personalized`)
        .then(({ data }) => {
          // console.log(data.data.wall.docs);
          docs.value = data.data.wall.docs.map((i: typeData) => {
            return {
              iid: i.iid,
              img: i.img,
              title: i.title,
              price: i.price,
              cfav: i.cfav
            }
          })
        });
    });

    let router = useRouter();

    const data = reactive({
      btnnext() {
        router.push({
          //name: 'Home',//这个query的话使用path再次刷新会页面空白最好用name
          path: "/",
          query: {
            mallCode: "M000989",
          },
        });
      },
    });
    const refData = toRefs(data);

    return {
      docs,
      ...onMounted,
      ...refData,
    };
  },
};
</script>

<template>
  <div class="body-wrap">
    <div class="imgblock-layer">
      <div class="imgblock-layer-mp" @click="$router.push({ path: '/time' })">
        <div class="imgblock-img">
          <img src="https://s10.mogucdn.com/mlcdn/c45406/190429_4d0jffeeefieijgkj39fgagik0i52_165x166.jpg" alt="" />
          <div class="">限时快抢</div>
        </div>
      </div>
      <div class="imgblock-layer-mp" @click="$router.push({ path: '/seller' })">
        <div class="imgblock-img">
          <img src="https://s10.mogucdn.com/mlcdn/c45406/190203_2bdhlkh0l7il4hlc2jfb98kg2232k_165x165.jpg" alt="" />
          <div class="">热销榜单</div>
        </div>
      </div>
      <div class="imgblock-layer-mp" @click="$router.push({ path: '/home' })">
        <div class="imgblock-img">
          <img src="https://s10.mogucdn.com/mlcdn/c45406/190909_1i9ig5c4f0idfb2l83ejbfac9d4ke_248x248.jpg" />
          <div class="">好货精选</div>
        </div>
      </div>
    </div>
    <div class="banner-box"><img src="@/assets/img/cnxh.png" alt="" /></div>

    <div>
      <ul class="infinite-list" style="overflow: auto">
        <li v-for="(d, i) in docs" :key="i" class="infinite-list-item" @click="
          $router.push({ path: '/merchandise', query: { itemId: d.iid } })
        ">
          <div class="infinite-item">
            <div class="infinite-img"><img :src="d.img" alt="" /></div>
          </div>
          <div class="infinite-title">{{ d.title }}</div>
          <div class="infinite-price">
            <div>￥{{ d.price }}</div>
            <!-- <div class="infinite-cfav">{{ d.cfav }}</div> -->
          </div>
          <div class="btn-box">立即购买</div>
        </li>
      </ul>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.body-wrap {
  // -webkit-user-select: none;

  .imgblock-layer {
    margin-top: 5px;
    display: flex;
    justify-content: space-around;
    user-select: none;

    .imgblock-layer-mp {
      .imgblock-img {
        width: 85px;
        height: 85px;
        position: relative;

        .time {
          position: absolute;
          top: 45px;
          left: 0;

          span {
            background: #333;
            border-radius: 0.03rem;
            width: 0.32rem;
            height: 0.32rem;
            text-align: center;
            line-height: 0.32rem;
            font-size: 0.2rem;
            font-weight: 700;
          }

          em {
            font-style: normal;
            position: relative;
            display: inline-block;
            width: 5px;
            height: 10px;
            margin: 0 2px;
            top: 0px;
            background: url();
            background-size: 100% 100%;
          }
        }

        img {
          display: block;
          width: 100%;
        }

        div {
          width: 85px;
          position: absolute;
          bottom: 10px;
          left: 0;
          color: #fff;
          font-size: 14px;
          font-weight: 600;
          text-align: center;
        }
      }
    }
  }

  .banner-box {
    margin-top: 10px;
    width: 100%;

    img {
      display: block;
      width: 100%;
    }
  }

  .infinite-list {
    display: flex;
    flex-wrap: wrap;
    background-color: #f5f5f5;
    user-select: none;
    padding-bottom: 50px;

    .infinite-list-item {
      flex: 0 0 45%;
      width: 40%;
      margin: 9px;
      padding: 9px;
      background-color: #fff;

      .infinite-img {
        width: 100%;
        height: 180px;

        img {
          display: block;
          width: 100%;
          height: 100%;
        }
      }

      .infinite-title {
        overflow: hidden; //超出的文本隐藏
        text-overflow: ellipsis; //溢出用省略号显示
        white-space: nowrap; //溢出不换行
        margin: 5px;
        font-size: 12px;
      }

      .infinite-price {
        display: flex;
        justify-content: space-between;
        margin-top: 5px;
        margin-bottom: 5px;

        .infinite-cfav {
          color: rgb(95, 89, 89);
          font-size: 12px;
        }
      }

      .btn-box {
        width: 100%;
        height: 30px;
        line-height: 30px;
        border-radius: 0.06rem;
        font-size: 0.26rem;
        text-align: center;
        margin-top: 0.04rem;
        margin-bottom: 0.04rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: rgb(255, 255, 255);
        background-color: rgb(255, 87, 119);
      }
    }
  }
}
</style>
